<template>
  <div class="box" v-if="str">
    <div class="vvv">
        <van-icon name="arrow-left" @click="fun11"/>
        <van-icon name="ellipsis" />
    </div>
    <van-swipe @change="onChange" class="nca">
        <van-swipe-item><img :src="str.img1" alt=""></van-swipe-item>
        <van-swipe-item><img :src="str.img2" alt=""></van-swipe-item>
        <van-swipe-item><img :src="str.img3" alt=""></van-swipe-item>
        <van-swipe-item><img :src="str.img4" alt=""></van-swipe-item>
        <van-swipe-item><img :src="str.img5" alt=""></van-swipe-item>
        <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/5</div>
        </template>
    </van-swipe>
    <div class="jia">
      <span>{{ str.price }}</span><span>{{ str.priceold }}</span>
    </div>
    <div class="jia1">{{ str.neirong }}</div>
    <div class="bbb">
        <div>送至</div>
        <div class="bbbv">陕西省西安市</div>
        <div><van-icon name="arrow" /></div>
    </div>
    <div class="tutupian">
      <img src="//static.asus.com.cn/store/20230129/15183497551019.png" alt="">
      <img src="//static.asus.com.cn/store/20220805/14370953981025.png" alt="">
      <img src="//static.asus.com.cn/store/20221205/15140398101102.png" alt="">
    </div>      
    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickButton"
         />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data(){
        return {
            str1:"",
            str:"",
            current: 0,
            arr:[],
            timer:null
        }
    },
    methods: {
        onChange(index) {
             this.current = index;
        },
        onClickIcon() {
            Toast('已添加购物车');
            this.$http({
            url:"http://localhost:3000/gwcxx",
            method:"post",
            data:{
                    category:this.str.h1,
                    proname:this.str.h2,
                    originprice:this.str.price,
                    img:this.str.img1
                }            
             }).then(res=>{
                console.log(res.data);
            })          
        },
        onClickButton() {
            Toast('点击按钮');
        },
        fun11(){
            this.$router.push("/shouye").catch(err=>err);
        }
    },
    mounted(){  
      this.$nextTick(()=>{
        this.timer=setInterval(()=>{
        this.str = this.$route.query.id
        },100);
        console.log(this.$route.query.id);
      })
    }
  }
</script>

<style scopde>
.tutupian{
  margin-bottom: 14vw;
}
.tutupian img{
  width: 100vw;
}
.vvv{
    width: 100vw;
    height: 9vw;
    padding: 2vw 0vw;
    display: flex;
    justify-content: space-between;
    font-size: 8vw;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}
.bbb{
    padding: 2vw 3vw;
    display: flex;
    margin: 5vw 0;
    background-color: #fff;
}
.bbbv{
    flex-grow: 2;
    text-align: center;
}
.van-icon{
    margin-left: 3vw;
}
 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .nca{
    width: 100vw;
    height: 100vw;
    margin-top: 13vw;
  }
  .nca img{
    width: 100%;
    height: 100%;
  }
  .sp3{
    background-color: rgba(255, 0, 0, 0.727);
    font-size: 4vw;
    margin-right: 2vw;
    padding: 0.5vw;
    color: #fff;
    border-radius: 5px;
  }
  .sp2{
    background-color: rgba(0, 0, 255, 0.713);
    font-size: 4vw;
    margin-right: 2vw;
    padding: 0.5vw;
    color: #fff;
    border-radius: 5px;
  }
  .jia{
    padding: 2vw ;
    background-color: #fff;
  }
  .jia span:nth-child(1){
    color: red;
    font-size: 7vw;
    
  }
  .jia span:nth-child(2){
    opacity: 0.5;
    font-size: 4vw;
    text-decoration: line-through;
    margin: 0 7vw;
  }
  .jia1{
    padding: 3vw ;
    background-color: #fff;
  }

.box{
    background-color: #f7f7f7;
}

</style>